<template>
  <div class="index-list">
    <!-- 轮播图 -->
    <div class="banners">
      <van-swipe :autoplay="1000" :show-indicators="images.length>1">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <van-image :src="image" fit="fill">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-swipe-item>
      </van-swipe>
    </div>

    <div v-show="false">
      <van-image v-for="(image, index) in banners" :key="index" :src="image" @load="imgLoad(index)"></van-image>
    </div>

    <!-- 推荐图标 -->
    <div class="mt-20">
      <div v-if="icons.length>0" class="reccomd flex aic bg-fff jc-sa">
        <template v-for="(item,index) in icons">
          <router-link  :to="`/category?categoryId=${item.categoryId}`" class="item flex2 aic jc-c" :key="index">
            <img :src="item.iconUrl" alt />
            <span class="mt-10">{{item.name}}</span>
          </router-link>
        </template>
      </div>
    </div>

    <!-- 秒杀和拼团 -->
    <div class="pintuan flex jc-sa bg-fff aic">
      <router-link to="/activity/seckill" class="l rel pl-10">
        <span class="abs title">秒杀</span>
        <div class="flex jc-sa aic h100pc">
          <div class>
            <p class="f14">秒杀</p>
            <p class="f999 f10 mt-5">超值惊喜</p>
            <p class="kanjia mt-5 f12 fff">立即砍价</p>
          </div>
          <img class="img" src="~@/assets/img/miaosha-icon.png" alt />
        </div>
      </router-link>

      <router-link to="/activity/groupBuy" class="r rel pl-10">
        <span class="abs title">拼团</span>
        <div class="flex jc-sa aic h100pc">
          <div class>
            <p class="f14">拼团</p>
            <p class="f999 f10 mt-5">限时拼团</p>
            <p class="kanjia mt-5 f12 fff">一键拼团</p>
          </div>
          <img class="img" src="~@/assets/img/pintuan-icon.png" alt />
        </div>
      </router-link>
    </div>

    <!-- 领取优惠券 -->
    <router-link to="/coupon" class="coupon flex jc-sb aic fff f14 ml-10 mr-10">
      <p class="l flex aic">
        <i class="iconfont icon-coupon f18 ml-5"></i>
        <span class="ml-5">超值福利</span>
        <span class="ml-5 mr-5">|</span>
        <span>全场满减</span>
      </p>
      <p class="r flex aic pr-10">
        <span>立即领取</span>
        <i class="iconfont icon-iconfontyoujiantou-copy-copy-copy-copy fff"></i>
      </p>
    </router-link>

    <van-sticky :offset-top="-10">
      <ul class="navagater bg-fff mt-10">
        <li @click="sortBy('reccomd')">推荐</li>
        <li @click="sortBy('inventory')" class="sales">
          <span>销量</span>
          <div class="van-icon-style">
            <van-icon name="arrow-up" />
            <van-icon name="arrow-down" />
          </div>
        </li>
        <li @click="sortBy('minPrice')" class="sales">
          <span>价格</span>
          <div class="van-icon-style">
            <van-icon name="arrow-up" />
            <van-icon name="arrow-down" />
          </div>
        </li>
      </ul>
    </van-sticky>

    <!-- 推荐列表 -->
    <van-list
      :offset="10"
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadMore"
      class="product-list fww flex jc-sa bg-fff pt-15 pb-60"
      rel="list"
    >
      <router-link
        v-for="(item,index) in productList"
        :key="index"
        class="item ova"
        tag="li"
        :to="`/product/detail/${item.productId}`"
      >
        <img class="img" alt v-lazy="item.imgUrl" />
        <div style="height:78px;" class="bg-fff flex2 lh15 mt-10">
          <p class="f14 ovt lh15">{{item.masterName}}</p>
          <p class="f12 ovt lh15">{{item.slaveName}}</p>
          <div class="lh15 flex jc-sb aic">
            <p>
              <span class="f10 red">￥</span>
              <span class="f15 red">{{item.minPrice | formatMoney}}</span>
            </p>
            <p>
              <span class="f10 f999">销量</span>
              <span class="f999 f14 pr-5">: {{item.inventory}}</span>
            </p>
          </div>
        </div>
      </router-link>
    </van-list>

    <Footer></Footer>
  </div>
</template>

<script>
// import Footer from "../components/Footer.vue";
import Banner from "./Banner";
import { Skeleton } from "vant";
export default {
  name: "productList",
  data() {
    return {
      sortObj: {
        // 按什么来排序reccomd-推荐,inventory-销量,price-价格
        type: "reccomd",
        // 1 升序,-1 降序
        num: 1
      },
      loading: false,
      // 是否已经没有数据了
      finished: false,
      pageNum: 1,
      images: [],
      // 轮播图
      banners: [],
      // 推荐产品
      icons: [],
      // 商品列表
      productList: []
    };
  },

  components: {
    [Skeleton.name]: Skeleton,
    Footer,
    Banner
  },

  created() {
    // 先取本地的
    this.getBanners();
    this.getCategory();
    this.getProductList();
  },

  methods: {
    // 图片加载成功
    imgLoad(index) {
      if (index === 0) {
        this.images.splice(0, 1, this.banners[0]);
      } else {
        this.images.push(this.banners[index]);
      }
    },

    // 加载更多
    loadMore() {
      if (!this.finished) {
        this.getProductList(this.pageNum);
      }
    },

    sortBy(type) {
      // 原来的排序类型
      let beforeType = this.sortObj.type;
      // 同类取反,原来升序就变降序,降序变升序
      if (type === beforeType) {
        this.sortObj.num = -this.sortObj.num;
      } else {
        this.sortObj = {
          type,
          // 默认升序
          num: 1
        };
      }

      // 重置
      this.pageNum = 1;
      this.finished = false;
      // 让滚动条回顶部,不然会触发loadMore事件
      window.scrollTo(0, 0);
      this.getProductList(this.pageNum);
    },

    getProductList(pageNum) {
      pageNum = pageNum || 1;
      let url = "/product/list";
      let data = {
        pageNum,
        ...this.sortObj
      };
      this.loading = true;
      this.$get(url, data).then(
        res => {
          // 第一页数据
          if (this.pageNum === 1) {
            this.productList = res.list;
          } else {
            // 非首页数据
            this.productList = [...this.productList, ...res.list];
          }
          if (res.list.length === 0) {
            this.finished = true;
          }
          this.pageNum++;
          this.loading = false;
        },
        err => {
          debugger;
          this.$fail(err);
           this.loading = false;
        }
      );
    },
    // 获取轮播图
    getBanners() {
      this.$axios.get("/product/getBanners").then(
        res => {
          this.banners = res.banners;
        },
        err => {
          this.$fail(err);
        }
      );
    },

    // 获取轮播图和推荐图标
    getCategory() {
      this.$axios.get("/category/all").then(
        res => {
          this.icons = res.list;
        },
        err => {
          this.$toast.loading(err);
        }
      );
    }
  }
};
</script>

<style lang="less">
@import "./index.less";
.reccomd {
  .item {
    width: 22%;
  }
  flex-wrap: wrap;
}

</style>